// 排序分类组件
import React, { Component } from 'react';
import classNames from 'classnames';

export class Tabs extends Component {
  // 没有定义自己组件的状态
  render() {
    return (
      // 排序tab
      <div className="tabs-order">
        {/* 显示的数据都是父组件传递过来的 */}
        {this.props.tabs.map((item) => {
          return (
            <div
              key={item.id}
              className={classNames({ on: item.type === this.props.active })}
              onClick={() => this.props.changeTab(item.type)}
            >
              {item.name}
            </div>
          );
        })}
      </div>
    );
  }
}

export default Tabs;
